<script lang="ts" setup>
import { computed, ref, h } from 'vue';
import { useVbenDrawer } from '@vben/common-ui';
import { message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { createApi, editApi } from '#/api/user/grade';

const formData = ref();

const [Form, formApi] = useVbenForm({
  schema: [
    {
      fieldName: 'grade_id',
      label: 'ID',
      defaultValue: 0,
      component: 'Input',
      dependencies: {
        show: false,
        // 随意一个字段改变时，都会触发
        triggerFields: [''],
      },
    },
    {
        fieldName: 'color',
        label: '颜色',
        component: 'Input',
        componentProps: {
            type: 'color',
        },
        rules: 'required',
    },
    {
        fieldName: 'name',
        label: '名称',
        component: 'Input',
        componentProps: {
            placeholder: '请输入名称',
        },
        rules: 'required',
    },
    {
        fieldName: 'weight',
        label: '权重',
        component: 'InputNumber',
        componentProps: {
            placeholder: '请输入权重',
            min: 1,
            class: 'min-w-[110px]',
        },
        rules: 'required',
    },
    {
        fieldName: 'sort',
        label: '排序',
        component: 'InputNumber',
        componentProps: {
            min: 0,
        },
        rules: 'required',
    },
    {
        fieldName: 'status',
        label: '状态',
        defaultValue: 1,
        component: 'Switch',
        componentProps: {
            class: 'w-auto',
            checkedChildren: '启用',
            checkedValue: 1,
            unCheckedChildren: '停用',
            unCheckedValue: 0,
        },
    },
    {
      component: 'Divider',
      fieldName: '',
      hideLabel: true,
      renderComponentContent: () => {
        return {
          default: () => h('div', '升级条件'),
        };
      },
    },
    {
        fieldName: 'upgrade.points',
        label: '积分',
        component: 'InputNumber',
        componentProps: {
            placeholder: '请输入积分',
            min: 1,
            class: 'min-w-[110px]',
        },
        rules: 'required',
    },
    {
      component: 'Divider',
      fieldName: '',
      hideLabel: true,
      renderComponentContent: () => {
        return {
          default: () => h('div', '权益'),
        };
      },
    },
    {
        fieldName: 'equity.discount',
        label: '折扣',
        component: 'InputNumber',
        componentProps: {
            placeholder: '请输入折扣',
            min: 0,
            max: 10,
            class: 'min-w-[110px]',
        },
        formItemClass: 'items-start',
        wrapperClass: 'flex-wrap',
        labelClass: 'pt-1',
        description: '0 ~ 10之间的数字',
        rules: 'required',
    },
  ],
  showDefaultActions: false,
});

const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) return;
    const values = await formApi.getValues();
    drawerApi.lock();
    (values.grade_id ? editApi(values) : createApi(values))
      .then((res) => {
        message.success({
          content: res.message,
        });
        drawerApi.close();
      })
      .catch(() => {
        drawerApi.unlock();
      });
  },
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = drawerApi.getData();
      formApi.resetForm();
      if (data) {
        formData.value = data;
        formApi.setValues(data);
      }
    }
  },
  overlayBlur: 1,
});

const getDrawerTitle = computed(() => {
  return formData.value?.id
    ? '编辑等级'
    : '新增等级';
});


</script>
<template>
  <Drawer :title="getDrawerTitle">
    <Form />
  </Drawer>
</template>
